<template>
  <div id="echart7" style="width: 100%;height:100%;"></div>
</template>

<script>


export default {
  name: 'echart7',
  props:{
    dataList3:Array
  },
  data() {
    return {

    }
  },
  mounted() {
  },
  methods: {
    initEcharts1() {
      const myChart = this.$echarts.init(document.getElementById('echart7'), null, { devicePixelRatio: 2.5 })
      // 指定图表的配置项和数据
      const
        option = {
          'animation': true,
          'series': [{
            'type': 'pie',
            'center': ['50%', '50%'],
            'radius': ['20%', '43%'],
            'color': ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
            'startAngle': 135,
            'labelLine': {
              'normal': {
                'length': 14
              }
            },
            'label': {
              'normal': {
                'formatter': '{b|{b}:} \n {per|{d}%} ',
                'backgroundColor': 'rgba(255, 147, 38, 0)',
                'borderColor': 'transparent',
                'borderRadius': 4,
                'rich': {
                  'a': {
                    'color': '#999',
                    'lineHeight': 12,
                    'align': 'center'
                  },
                  'hr': {
                    'borderColor': '#aaa',
                    'width': '100%',
                    'borderWidth': 1,
                    'height': 0
                  },
                  'b': {
                    'color': '#b3e5ff',
                    'fontSize': 12,
                    'lineHeight': 15
                  },
                  'c': {
                    'fontSize': 12,
                    'color': '#eee'
                  },
                  'per': {
                    'color': '#FDF44E',
                    'fontSize': 12,
                    'padding': [5, 5],
                    'borderRadius': 2
                  }
                },
                'textStyle': {
                  'color': '#fff',
                  'fontSize': 16
                }
              }
            },
            'emphasis': {
              'label': {
                'show': true,
                'formatter': '{b|{b}:} \n {per|{d}%}  ',
                'backgroundColor': 'rgba(255, 147, 38, 0)',
                'borderColor': 'transparent',
                'borderRadius': 4,
                'rich': {
                  'a': {
                    'color': '#999',
                    'lineHeight': 15,
                    'align': 'center'
                  },
                  'hr': {
                    'borderColor': '#aaa',
                    'width': '100%',
                    'borderWidth': 1,
                    'height': 0
                  },
                  'b': {
                    'color': '#fff',
                    'fontSize': 14,
                    'lineHeight': 15
                  },
                  'c': {
                    'fontSize': 14,
                    'color': '#eee',
                    'lineHeight': 15
                  },
                  'per': {
                    'color': '#FDF44E',
                    'fontSize': 14,
                    'padding': [5, 5],
                    'borderRadius': 2
                  }
                }
              }
            },
            'data': this.dataList3
          }, {
            'type': 'pie',
            'center': ['50%', '50%'],
            'radius': ['15%', '14%'],
            'label': {
              'show': false
            },
            'data': [{
              'value': 78,
              'name': '实例1',
              'itemStyle': {
                'normal': {
                  'color': {
                    'x': 0,
                    'y': 0,
                    'x2': 1,
                    'y2': 0,
                    'type': 'linear',
                    'global': false,
                    'colorStops': [{
                      'offset': 0,
                      'color': '#9F17FF'
                    }, {
                      'offset': 0.2,
                      'color': '#01A4F7'
                    }, {
                      'offset': 0.5,
                      'color': '#FE2C8A'
                    }, {
                      'offset': 0.8,
                      'color': '#FEE449'
                    }, {
                      'offset': 1,
                      'color': '#00FFA8'
                    }]
                  }
                }
              }
            }]
          }]
        }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      myChart.currentIndex = -1
      //myChart.setOption(option);
      //console.log(option.series[0].data[0]);
      setInterval(function() {
        var dataLen = option.series[0].data.length
        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: myChart.currentIndex
        })
        myChart.currentIndex = (myChart.currentIndex + 1) % dataLen
        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: myChart.currentIndex
        })
      }, 1000)
    }
  }
}
</script>

<style scoped>

</style>
